/* 
盒子模型题  
· 宽高、内边距、外间距全100px
· 10px圆角
· 盒子做成球
· 使用a.jpg为背景，铺满盒子
· 使用怪异盒模型
· 一像素黑色边框
· 隐藏溢出部分
*/

/* 
浮动题
· 父盒子BFC轻浮法
· 伪元素轻浮法
*/

/* 
文本题
· 红色加粗倾斜不要下划线缩进10像素
· 单行文本宽高居中
*/

/* 
定位题
· 定位到父盒子的四角
· 定位到父盒子的右下角并继续向下突破10px
· 相对于自身当前位置向左上各偏移10px
· 当前盒子在父盒子中宽高居中
*/

/*
特效题
· 所有属性在1秒内匀速完成动画过渡
· 相对于自身当前位置向左上各偏移10px
*/

/*
弹性盒
· 子元素宽高居中
· 1111/1221/0110分配主轴空间
*/

.mystyle {
    /* 盒子属性 */
    /* 盒子宽高 */
    width: 100px;
    height: 100px;
    padding-right: 5px;
    margin-top: -10px;
    border: 1px solid black;
    border-radius: 50%;
    display: inline-block;
    background-color: #f00;
    background: url("./a.jpg") 0 0 / cover no-repeat;
    box-sizing: border-box;


    /* 浮动属性 */
    float: left;
    float: right;
    clear: both;
    overflow: hidden;


    /* 字体属性 */
    color: red;
    font-size: 20px;
    line-height: 100px;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    text-indent: 10px;


    /* 定位属性 */
    position: relative;
    position: absolute;
    right: -10px;
    top: 10px;
    bottom: -10px;
    left: 10px;


    /* 特效属性 */
    transition: all .5s linear;
    transform: translateX(50px);
    transform: translate(50%,-50%);
    transform: translateY(-10px);
    transform: translate(-10px,10px);


    /* 弹性盒属性 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: flex-end;

    /* 1 1 1 1 */
    justify-content: space-evenly;

    /* 0 1 1 0 */
    justify-content: space-between;

    /* 1 2 2 1 */
    justify-content: space-around;
}

/* clearfix */
.clearfix::after {
    content: "";
    visibility: hidden;
    display: block;
    clear: both;
}